Vue3 中使用事件总线

为什么要使用 mitt

Vue3.0 版本中把 $on、$off、$once 等事件函数都去除掉了，只留下了 $emit() 用于父子组件之间的沟通。为了能够使用事务总线，除了 $emit 触发事件之外，还至少应该有 $on 监听函数。

而当 Vue 升级到 3.0 版本后，其创建方法改成了 createApp({}) ，prototype 属性也被取消了，因此无法使用之前 Vue.prototype.$bus = new Vue() 的方式使用事务总线已经行不通了

目前官方推荐使用第三方库 mitt

npm install --save mitt

然后在程序中使用事件总线：

在 src 目录下创建 utils 文件夹文件夹下创建 bus 目录及 index.ts 文件

import mitt from 'mitt';
const bus = mitt();
export default bus;

在使用 bus 的页面引入 bus 文件即可

import bus from '../../core/util/bus';

使用例：

//在组件A中使用事务总线触发某个动作
bus.emit("EVENTTYPE");

//在组件B中监听动作的发生
bus.on("EVENTTYPE",()=>{
    console.log("EVENTTYPE发生了")
})

注意：接收方，最好写在 onMounted 里面，因为 mounted 自动执行，并且可以赋值给定义好的变量，以便于页面使用传递过来的数据